import React, { useState } from "react";
import { Editor } from "react-draft-wysiwyg"; //引入富文本编辑器
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css"; //引入富文本编辑器的样式
import { convertToRaw } from "draft-js"; //得到这个富文本的内容
import draftToHtml from "draftjs-to-html"; //把你的富文本转换为html的东西
import "./Editor.css";
// import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'

export default function NewsEditor(props) {
  const [editorState, setEditorState] = useState("");
  return (
    <div>
      {/* 直接使用<Editor />这个标记就可以直接创建出来一个富文本编辑器 */}
      <Editor
        editorState={editorState} //受控组件
        /* 
         以下都是设置样式的
         toolbarClassName="toolbarClassName"
         wrapperClassName="wrapperClassName"
         editorClassName="editorClassName"
         */
        // 把这个新的editorState每次状态更新时在更新到状态里面
        onEditorStateChange={(editorState) => setEditorState(editorState)}
        //失去焦点时的操作html片段  draftToHtml(convertToRaw(editorState.getCurrentContent()获取内容转换html片段
        onBlur={() => {
          // 传给父组件
          props.getContent(
            draftToHtml(convertToRaw(editorState.getCurrentContent()))
          );
        }}
      />
    </div>
  );
}
